<template>
  <div>
    <!-- 弹出指标完成输入框  组件、待用-->
    <el-dialog title="指标完成率" :visible.sync="dialogpercent" width="60%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="第一季度">
          <el-input
            v-model="form.num1"
            size="medium"
            placeholder="请输入第一季度完成率，值为0~100"
            style="width:35%"
          ></el-input>
          <b style="font-weight:500; display: inline-block;margin-left:10px ;"
            >备注</b
          >
          <el-input
            v-model="form.remark1"
            size="medium"
            placeholder="备注"
            style="width:58%"
          ></el-input>
        </el-form-item>

        <el-form-item label="第二季度">
          <el-input
            v-model="form.num2"
            size="medium"
            placeholder="请输入第二季度完成率，值为0~100"
            style="width:35%"
          ></el-input>
          <b style="font-weight:500; display: inline-block;margin-left:10px ;"
            >备注</b
          >
          <el-input
            v-model="form.remark2"
            size="medium"
            placeholder="备注"
            style="width:58%"
          ></el-input>
        </el-form-item>
        <el-form-item label="第三季度">
          <el-input
            v-model="form.num3"
            size="medium"
            placeholder="请输入第三季度完成率，值为0~100"
            style="width:35%"
          ></el-input>
          <b style="font-weight:500; display: inline-block;margin-left:10px ;"
            >备注</b
          >
          <el-input
            v-model="form.remark3"
            size="medium"
            placeholder="备注"
            style="width:58%"
          ></el-input>
        </el-form-item>
        <el-form-item label="第四季度">
          <el-input
            v-model="form.num4"
            size="medium"
            placeholder="请输入第四季度完成率，值为0~100"
            style="width:35%"
          ></el-input>
          <b style="font-weight:500; display: inline-block;margin-left:10px ;"
            >备注</b
          >
          <el-input
            v-model="form.remark4"
            size="medium"
            placeholder="备注"
            style="width:58%"
          ></el-input>
        </el-form-item>
      </el-form>
      <b style="color:red" v-show="isShow">警告:请输入0~100的数字</b>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogpercent = false">取 消</el-button>
        <el-button type="primary" @click="dataDialogpercent()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogpercent: true,
      form: {
        num1: 1,
        num2: "",
        num3: "",
        num4: "",
        remark1: "",
        remark2: "",
        remark3: "",
        remark4: ""
      },
      month: 1,
      isShow: false
    };
  },
  mounted() {
    this.month = this.getQuarterByMonth();
    console.log(this.month);
  },
  methods: {
    //   点击确定按钮
    dataDialogpercent() {
      let testNum = "";
      switch (this.month) {
        case 1:
          console.log("1");
          break;
        case 2:
          testNum = this.form.num2;
          console.log("2");
          break;
        default:
          console.log("3");
          默认代码块;
      }

      if (this.isNumber(testNum)) {
        console.log("不合格");
      } else {
        console.log("合格");
      }
    },
    // 输入值
    isNumber(num) {
      var reg = new RegExp("^(\\d|[1-9]\\d|100)$");
      if (!reg.test(num)) {
        return true;
      } else {
        return false;
      }
    },
    // 获取当前季度
    getQuarterByMonth() {
      var today = new Date(); //获取当前时间
      var month = today.getMonth() + 1; //getMonth返回0-11
      //下面是几个if
      if (month >= 1 && month <= 3) {
        return 1;
      } else if (month >= 4 && month <= 6) {
        return 2;
      } else if (month >= 7 && month <= 9) {
        return 3;
      } else {
        return 4;
      }
    }
  }
};
</script>

<style scoped></style>
